<template>
	<view>
		<an-nav-bar title="添加地址"> </an-nav-bar>
		<view class="form">
			<view class="line flex">
				<view class="label">联系人</view>
				<input type="text" placeholder="请填写联系人姓名" v-model="form.concatName">
				<view class="gender flex">
					<view class="flex " @click="form.sex = 1" :class="{'check':form.sex == 1}">
						<i></i>
						<text>先生</text>
					</view>
					<view class="flex" @click="form.sex = 2" :class="{'check':form.sex == 2}">
						<i></i>
						<text>女士</text>
					</view>
				</view>
			</view>
			<view class="line flex">
				<view class="label">手机号</view>
				<input type="number" v-model="form.mobile" placeholder="请输入手机号码">
				<view class="areaCode flex">
					+86
				</view>
			</view>
			<view class="line flex">
				<view class="label">服务地址</view>
				<view class="address flex" @click="chooseLocation">
					<view class="text" v-if="!form.address">请选择服务地址</view>
					<view v-else class="info">
						<view class="name">{{form.title}}</view>
						<view class="des">{{form.address}}</view>
					</view>
				</view>
			</view>
			<view class="line flex">
				<view class="label">门牌号</view>
				<input type="text" v-model="form.houseNumber" placeholder="例：6栋三单元501">
			</view>
			<view class="default">
				<view class="set flex_sw">
					<view class="label">设置为默认地址</view>
					<switch @change="onSwitchChange" :checked="form.defaultFlag == '1'"></switch>
				</view>
				<view class="tips">
					每次打开App会优先定位至该地址，方便您轻松下单享受服务
				</view>
			</view>
		</view>
		<view class="bar" @click="onsubmit">保存</view>
		<lw-message ref="lwMessage" />
	</view>
</template>

<script>
	import lwMessage from "@/components/lw-message/lw-message.vue"
	export default {
		components: {
			lwMessage
		},
		data() {
			return {
				form: {
					"address": "",
					"area": "",
					"areaCode": "",
					"city": "",
					"cityCode": "",
					"concatName": "",
					"houseNumber": "",
					"latitude": 0,
					"longitude": 0,
					"mobile": "",
					"province": "",
					"provinceCode": "",
					"sex": 1,
					"title":""
				}
			};
		},
		onLoad(option) {
			if (option.id) {
				this.$http.get('/app/customer/customerAddress/' + option.id).then(res => {
					console.log(res)
					this.form = res.data
				})
			}
		},
		methods: {
			onSwitchChange({
				detail
			}) {
				this.form.defaultFlag = detail.value ? '1' : '0'
			},
			onsubmit() {
				if (!this.form.concatName) {
					this.$refs.lwMessage.show({
						id: "",
						msg: "请输入联系人姓名",
						icon: "error",
						iconColor: 'red'
					})
					return
				}
				if (!this.form.mobile) {
					this.$refs.lwMessage.show({
						id: "",
						msg: "请输入手机号",
						icon: "error",
						iconColor: 'red'
					})
					return
				}
				if (!this.$common.checkMobile(this.form.mobile)) {
					this.$refs.lwMessage.show({
						id: "",
						msg: "请输入正确的手机号",
						icon: "error",
						iconColor: 'red'
					})
					return
				}
				if (!this.form.address) {
					this.$refs.lwMessage.show({
						id: "",
						msg: "请选择服务的地址",
						icon: "error",
						iconColor: 'red'
					})
					return
				}
				if (!this.form.houseNumber) {
					this.$refs.lwMessage.show({
						id: "",
						msg: "请输入门牌号",
						icon: "error",
						iconColor: 'red'
					})
					return
				}
				let method = this.form.id ? 'put' : 'post'
				this.$http[method]('/app/customer/customerAddress', this.form).then(res => {
					this.$refs.lwMessage.show({
						id: "",
						msg: method == 'post' ? '新增成功' : '修改成功',
						icon: "success",
					})
					setTimeout(() => {
						this.$mHelper.back(true)
					}, 2000)
				})
			},
			// 打开地图选择位置
			chooseLocation() {
				const that = this;
				uni.chooseLocation({
					success(res) {
						that.$http.get(
							`/appNoAuth/store/massageTechnician/getAddress/${res.longitude}/${res.latitude}`
						).then(r => {
							let result = r.data || r.result
							let data = JSON.parse(result)
							console.log(data.result)
							that.$set(that.form,'longitude',data.result.location.lng)
							that.$set(that.form,'latitude',data.result.location.lat)
							that.$set(that.form,'address',data.result.address)
							that.$set(that.form,'area',data.result.ad_info.district)
							that.$set(that.form,'city',data.result.ad_info.city)
							that.$set(that.form,'province',data.result.ad_info.province)
							that.$set(that.form,'cityCode',data.result.ad_info.city_code)
							that.$set(that.form,'areaCode',data.result.ad_info.adcode)
							that.$set(that.form,'title',data.result.formatted_addresses.recommend)
							console.log(that.form)
						})
						
					}
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.form {
		width: 100%;
		padding: 0 50rpx;
		box-sizing: border-box;
		background: #fff;

		.default {
			padding-top: 20rpx;

			switch {
				transform: scale(.8) !important;

			}

			/deep/.uni-switch-input {
				margin-right: 0rpx !important;
			}

			.set {
				color: #333;
				font-size: 32rpx;
			}

			.tips {
				color: #c2c0c0;
				font-size: 28rx;
				padding: 10rpx 0 30rpx;
			}
		}

		.line {
			height: 100rpx;
			border-bottom: 2rpx solid #eee;

			.text {
				flex: 1;
				color: #999;
				font-size: 30rpx;
			}

			.address {
				flex: 1;

				.info {
					flex: 1;

					.name {
						color: #333;
						font-size: 30rpx;
						width: 440rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.des {
						color: #999;
						font-size: 24rpx;
						width: 470rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				&::after {
					content: "";
					display: block;
					background: url(/static/grey-arrow-right.png) no-repeat;
					background-size: 100% auto;
					width: 12rpx;
					height: 22rpx;
					margin-left: 20rpx;
				}
			}

			.areaCode {
				font-size: 30rpx;
				font-weight: 400;
				color: #333;

				// &::after {
				// 	content: "";
				// 	display: block;
				// 	background: url(/static/grey-arrow-right.png) no-repeat;
				// 	background-size: 100% auto;
				// 	width: 12rpx;
				// 	height: 22rpx;
				// 	margin-left: 20rpx;
				// }
			}

			.gender {
				>view {
					color: #333;
					font-size: 14px;
					margin-left: 17px;

					i {
						display: block;
						width: 26rpx;
						height: 26rpx;
						border: 2rpx solid #ccc;
						border-radius: 50%;
						margin-right: 6rpx;
						box-sizing: border-box;
					}

				}

				.check>i {
					border: 2rpx solid #aa8050;
					display: flex;
					align-items: center;
					justify-content: center;

					&::after {
						content: "";
						display: block;
						width: 10rpx;
						height: 10rpx;
						background: #aa8050;
						border-radius: 50%;
					}
				}
			}

			.label {
				color: #000;
				font-size: 32rpx;
				margin-right: 20rpx;
			}

			input {
				flex: 1;
				position: relative;
				display: block;
				height: 100%;
				background: none;
				color: inherit;
				opacity: 1;
				font: inherit;
				line-height: inherit;
				letter-spacing: inherit;
				text-align: inherit;
				text-indent: inherit;
				text-transform: inherit;
				text-shadow: inherit;
			}
		}
	}

	.bar {
		width: 720rpx;
		height: 80rpx;
		background: #aa8050;
		border-radius: 38rpx;
		margin: 100rpx auto;
		color: #fff;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
	}
</style>
